import React, { Component } from 'react';
import styled from 'styled-components/native';
import { View } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { ViewPager } from 'rn-viewpager';

import { ToolbarButton, ToolbarTabs, Toolbar } from '../components/common';
import NotificationListView from '../components/messages/NotificationListView';
import ChatConversationView from '../components/messages/ChatConversationView';

const Root = styled(ViewPager) `
  width: 100%;
  height: 100%;
`;

class MessagesScreen extends Component {
  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    const headerLeft = (
      <ToolbarButton
        text="发现群"
        onPressed={() => {
          console.log('打开发现群界面');
        }}
      />
    );
    const headerRight = (
      <ToolbarButton
        onPressed={() => {
          console.log('打开聊天界面');
        }}
      >
        <Feather size={25} name="message-circle" />
      </ToolbarButton>
    );
    const tabs = (
      <ToolbarTabs
        innerRef={component => { this.toolbarTabs = component }}
        tabs={[
          { id: "TAB_NOTIFICATION", title: "通知" },
          { id: "TAB_CHAT", title: "聊天" }
        ]}
        onTabChanged={index => {
          if (params.changePage) params.changePage(index);
        }}
        selectIndex={params.selectTabIndex || 0}
      />
    );
    const header = (
      <Toolbar
        headerLeft={headerLeft}
        headerRight={headerRight}
        headerCenter={tabs}
        headerStyle={{
          elevation: 1
        }}
      />
    );

    return {header};
  };

  componentDidMount() {
    this.props.navigation.setParams({ changePage: index => { this.viewPager.setPage(index) }});
  }

  render() {
    return (
      <Root
        innerRef={component => { this.viewPager = component }}
        initialPage={0}
        onPageSelected={e => {
          this.props.navigation.setParams({ selectTabIndex: e.position });
        }}
      >
        <View>
          <NotificationListView />
        </View>
        <View>
          <ChatConversationView />
        </View>
      </Root>
    );
  }
}

export default MessagesScreen;
